<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>动态加载</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!--ie渲染引擎-->
    <meta name="format-detection" content="telephone=no" /><!--忽略电话号码和email识别-->
    <meta name="format-detection" content="email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" /><!--当网站添加到主屏幕快速启动方式，将网站添加到主屏幕快速启动方式-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" /><!--隐藏ios上的浏览器地址栏-->
    <meta name="full-screen" content="yes"><!-- UC默认竖屏 ，UC强制全屏 -->
    <meta name="browsermode" content="application">
    <meta name="x5-orientation" content="portrait"><!-- QQ强制竖屏 QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <meta name="x5-page-mode" content="app">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    
    
</head>
<body>
<button type="botton" onclick="doRender()">渲染</button>

<div id="app" >
        <h1>{{msg}}</h1>
        <button type="button" class="btn btn-outline-info btn-sm rounded-0">CSS 按钮</button><BR/><BR/>
        <b-button variant="success" @click="alert(msg)">组件按钮</b-button>
</div>


<script type="text/javascript">
function loadScript(url, doc = document) { 
        let script_ = doc.createElement("script");
        script_.type = "text/javascript";
        script_.src = url;
        script_.onload = function () {
            console.log(url);
        };
        doc.body.appendChild(script_);
}

function loadCss(url, doc = document) {
    let link = doc.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = url;
    doc.head.appendChild(link);
}


//这种实现方式不正确，不能保证加载顺序
function doRender(){
	 loadCss('//unpkg.com/bootstrap/dist/css/bootstrap.min.css');
     loadCss('//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css');

    
     loadScript('//unpkg.com/vue@latest/dist/vue.min.js');
     loadScript('//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js');
     loadScript('//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js');
     loadScript('./index.js');   
}


</script>
</body>
</html>
